<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="marginTop" @tap="returnFn"><text class="grace-grids-icon grace-icons main-font-color">&#58902;</text></view>
			<view class="marginTop grace-flex-center p-5">
				<image src="/static/login.png" mode="widthFix" class="logo"></image>
			</view>
			<form @submit="loginNow" class="grace-form" style="margin-top:60rpx;">
				<view class="grace-form-item grace-border-b">
					<view class="grace-pnper">
						<text class="grace-form-label">用户账号</text>
					</view>
					<view class="grace-form-body">
						<input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<view class="grace-pnper">
						<text class="grace-form-label">用户密码</text>
					</view>
					<view class="grace-form-body">
						<input type="password" v-model="psw" class="grace-form-input" name="ps" placeholder="请输入密码" />
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">短信验证码</text>
					<view class="grace-form-body">
						<input type="number" class="grace-form-input" v-model="yzm" name="yzm" placeholder="请输入验证码" />
					</view>
					<view style="width:400rpx; margin-left:30rpx;">
						<text class="login-sendmsg-btn my-bg grace-white grace-border-radius" @tap='getVCode'>{{vcodeBtnName}}</text>
					</view>
				</view>
				<view class="grace-margin-top">
					<button form-type="submit" type="default" class=" grace-border-radius my-bg">
						<text class="grace-white grace-button" style="font-size: 20px;">提交</text>
					</button>
				</view>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
var graceChecker = require("@/graceUI/jsTools/graceChecker.js");
// 请求方法
import $HTTP from '@/common/lib/request.js';
import {mapMutations} from 'vuex';

export default {
	data() {
		return {
			pnpre : 0,
			vcodeBtnName: "获取验证码",
			countNum : 60,
			countDownTimer : null,
			phoneno : '',
			psw : '',
			yzm:''
		}
	},
	methods:{
		...mapMutations(['login']),
		pageJumps(url){
			uni.navigateTo({
				url: url,
				animationType:'fade-in',
				animationDuration:600
			});
		},
		loginWithWx : function(){
			uni.showToast({
				title:"请完善登录功能", icon:"none"
			})
		},
		changePre : function(e){
			this.pnpre = e.detail.value;
		},
		async loginNow(e){
			// 表单验证
			var rule = [
				{ name: "pn", checkType: "phoneno", errorMsg: "请填写正确的手机号" },
				{ name: "ps", checkType: "string", checkRule: "6,12", errorMsg: "密码需要保持在6-12位" },
				{ name: "yzm", checkType: "string", checkRule: "4,6", errorMsg: "请正确填写短信验证码" },
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			// 验证通过
			let _this = this;
			if (checkRes) {
				// uni.showToast({ title: "请观察控制台", icon: "none" });
				let options = {
					"act":"edit_password",
					"mobile":this.phoneno,
					"password":this.psw,
					"code":this.yzm
				}
				console.log('options',options)
				
				let data = await $HTTP.postDx('/api/api.php', options)
				// 直接登录
				let loginOptions = {
					"act":"login",
					"mobile":_this.phoneno,
					"password":_this.psw,
				}
				let loginFo = await $HTTP.postDx('/api/api.php', loginOptions).then(res=>{
					uni.showToast({
						title: '修改密码成功并自动登录',
						icon: 'none'
					});
					setTimeout(()=>{
						_this.login(res.info);
						// 页面跳转到个人中心
						uni.vibrateLong();
						 uni.switchTab({
							url: '/pages/home/home',
						 })
					},2000)
					
				})
			} else {
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		},
		getVCode : function(){
			var myreg=/^[1][0-9]{10}$/;
			if (!myreg.test(this.phoneno)){
				uni.showToast({ title: '请正确填写手机号码', icon : "none"});
				return false;
			}
			// 手机号码为 :  this.phoneno
			// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
			if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送'){return ;}
			this.vcodeBtnName =  "发送中...";
			// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
			// 假设发送成功，给用户提示
			uni.showToast({ title: '短信已发送，请注意查收', icon : "none"});
			// 倒计时
			this.countNum = 60;
			this.countDownTimer = setInterval(function(){this.countDown();}.bind(this), 1000);
			
			//调用短信验证
			$HTTP.postDx('/api/api.php', { act: 'get_code',mobile: this.phoneno }).then(data => {
				console.log(111111,data)
			});
		},
		returnFn : function(e){
			uni.navigateBack({
				delta: 1
			});
		},
		countDown : function(){
			if (this.countNum < 1){
			  clearInterval(this.countDownTimer);
			  this.vcodeBtnName = "重新发送";
			  return ;
			}
			this.countNum--;
			this.vcodeBtnName =  this.countNum + '秒重发';
		},
		reg : function(){
			wx.showToast({ title: "注册页面类似登录，请自行完善 (:", icon: "none" });
		}
	},
	components:{
		gracePage
	}
}
</script>
<style>
.marginTop{margin-top:100rpx;}
.logo{width:250rpx; height:68rpx}
.login-sendmsg-btn{height:60rpx; text-align: center;  line-height:60rpx; font-size:26rpx; display: block;}
.grace-pnper{width:168rpx;}
.my-bg{background-image:linear-gradient(to right, #1CA376,#54BF95);}
.my-color{color: #54BF95;}
.grace-form-label{width:168rpx;}
.grace-form-input{text-align:left;}
.grace-form-item{padding:10rpx 0;}
.grace-login-three-items{width:88rpx; height:88rpx; line-height:88rpx; font-size:60rpx; color:#54BF95; text-align:center; margin:10rpx;}
</style>